<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图文混排</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
<ul class="left">
    <li><a href = "#">热门</a></li>
    <li><a href = "#">头条</a></li>
    <li><a href = "#">视频</a></li>
    <li class="checked">新鲜事</li>
    <li><a href = "#">榜单</a></li>
    <li><a href = "#">搞笑</a></li>
    <li><a href = "#">社会</a></li>
    <li><a href = "#">时尚</a></li>
    <li><a href = "#">电影</a></li>
    <li><a href = "#">美女</a></li>
    <li><a href = "#">体育</a></li>
    <li><a href = "#">动漫</a></li>
</ul>
<ul class="right">
    <img src="img/截图1.png" alt=""class="pic1">
    <li><a href = "#">游玩2019北京世园会全攻略</a>
    <div class="info">
        <img src="img/u=1493038296,3186447711&fm=58.jpg" alt="" class="pic2">
        <a href = "#">北京世园会</a>
    </div>
    </li>
    <img src="img/截图2.png" alt=""class="pic1">
    <li><a href = "#">付费问答|股市震荡！五一前后走势如何？</a>
    <div class="info">
        <img src="img/u=1493038296,3186447711&fm=58.jpg" alt="" class="pic2">
        <a href = "#">微博问答</a>
    </div>
    </li>
    <img src="img/截图3.png" alt=""class="pic1">
    <li><a href = "#">《大侦探皮卡丘》你可能想了解这些事</a>
    <div class="info">
        <img src="img/u=1493038296,3186447711&fm=58.jpg" alt="" class="pic2">
        <a href = "#">爱看不看</a>
    </div>
    </li>
    <img src="img/截图4.png" alt=""class="pic1">
    <li><a href = "#">趁青春去旅行，明星问答大翻牌</a>
    <div class="info">
        <img src="img/u=1493038296,3186447711&fm=58.jpg" alt="" class="pic2">
        <a href = "#">微博问答</a>
    </div>
    </li>
</ul>
    </div>
</body>
</html>